<template>
  <a-drawer
    title="付款申请"
    placement="right"
    :width="width"
    :closable="true"
    :visible="visible"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    :after-visible-change="afterVisibleChange"
    @close="close"
  >
    <div class="box" title="付款申请信息">
      <a-form-model
        ref="ruleForm"
        style="margin:18px 10px 10px 10px"
        :model="record"
        :rules="rules">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="结算单位" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.settlementCompany" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.paySerial" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="付款申请人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.createBy" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date style="width: 240px" v-model="record.createTime" disabled></j-date>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="付款日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date style="width: 240px" v-model="record.payDate" disabled></j-date>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="付款类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.payType" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="开票状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.billStatus" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="付款币种" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.currency" disabled></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.amount" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="发票号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.invoiceNumber" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="汇率" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.rate" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="本位币金额" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.cnyAmount" disabled></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="备注" :labelCol="labelCol1" :wrapperCol="wrapperCol1">

              <a-input v-model="record.remark" type="textarea" :rows="4" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请事由" :labelCol="labelCol1" :wrapperCol="wrapperCol1">

              <a-input v-model="record.applyReason" type="textarea" :rows="4" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

    <a-spin :spinning="confirmLoading">
      <a-tabs default-active-key="1">

        <a-tab-pane key="1">
          <span slot="tab">
       应付费用明细
            <a style="color: red;margin-left: 8px;font-size: small">应付(CNY:{{ record.cnyAmount }})</a>
      </span>
          <j-vxe-table
            ref="receivableTable"
            resizable
            keep-source
            :loading="confirmLoading"
            :height="350"
            :dataSource="payList"
            :columns="payCol"
            style="margin-top: 8px;"
            @selectRowChange="handleSelectRowChange"
            :cell-style='cellStyle'
            bordered
          >
          </j-vxe-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <div style="margin-top: 30px"></div>
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'left',
          zIndex: 999,
        }"
    >
      <a-button :style="{ marginLeft: '8px' }" @click="close">
        关闭
      </a-button>
      <a-button type="primary" @click="download" icon="snippets" style="margin-left: 8px">
        打印单据
      </a-button>
    </div>
    <a-modal v-model="selectDownVisible" title="发票申请打印" ok-text="确认" cancel-text="取消" @ok="hideDownModal">
      <div>
        选择公司：
        <a-select v-model="downcom" style="width: 300px">
          <a-select-option value="1">
            青岛大金汇国际货运有限公司
          </a-select-option>
          <a-select-option value="2">
            青岛海那威尔物流有限公司
          </a-select-option>
        </a-select>
      </div>
    </a-modal>
  </a-drawer>
</template>

<script>
import BillForm from '@/views/jzxtrade/modules/BillForm'
import { httpAction, getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@api/api'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import moment from 'moment'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import Vue from 'vue'
import { getDictItems } from '../../components/dict/JDictSelectUtil'
import { getDictItemsFromCache } from '../../api/api'
import { deleteAction, postAction } from '../../api/manage'

export default {

  name: 'ExpenseEntrySh',
  components: {
    JFormContainer,
    BillForm,
    JDate,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: {},
  data() {
    return {
      selectDownVisible: false,
      downcom: '1',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      width: '95%',
      Allfee: '1800',
      visible: true,
      selectedRowKeys: [],
      isdelete: false,
      payList: [],
      confirmLoading: false,
      modelId: '',
      record: {},
      CNYFee: '888',
      payCol: [
        {
          title: '费用状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '200px',
          defaultValue: '录入状态'
        },
        {
          title: '费用名称',
          key: 'costName',
          type: JVXETypes.normal,
          width: '200px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '220px'
        },
        {
          title: '计费单位',
          key: 'chargingUnit',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '单价',
          key: 'price',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '数量',
          key: 'num',
          type: JVXETypes.normal,
          width: '180px'

        },
        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '总价',
          key: 'totalPrice',
          type: JVXETypes.normal,
          width: '180px',
          defaultValue: '0',
          statistics: ['sum']
        },
        // {
        //   title: '账单号',
        //   key: 'billNumber',
        //   type: JVXETypes.normal,
        //   width: '200px'
        // },
        {
          title: '发票号',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      rules: {
        invoiceNumber: [{ required: true, message: '请填写发票号', trigger: 'change' }],
        invoiceType: [{ required: true, message: '请选择发票类别', trigger: 'change' }],
        invoiceAttr: [{ required: true, message: '请选择发票属性', trigger: 'change' }],
        invoiceDate: [{ required: true, message: '请选择开票日期', trigger: 'change' }]
      },
      url: {
        save: '/box.ship/shipInfo/cost/add',
        queryById: '/box.ship/shipInfo/cost/queryByShipId',

        deleteurl: '/box.ship/shipInfo/cost/del',
        submiturl: '/invoice/bill',
        selecturl: '/payapply/query/costinfo'
      },
      receiveCellEdit: true,
      // 选择的行
      selectedRows: []
    }
  },
  computed: {},
  created() {
  },
  beforeCreate() {
    // this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
    // this.form.getFieldDecorator('boxType', { initialValue: [], preserve: true });

    // this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
  },
  methods: {
    requestRecord(val) {
      console.log(val)
      this.record = val
      this.selectlist()
    },

    selectlist() {
      let param = { id: this.record.id }
      getAction(this.url.selecturl, param).then(res => {
        console.log(res)
        if (res.success) {
          this.payList = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {
      this.selectedRows = event.selectedRows
    },
    cellStyle(row) {
      // console.log(row.row);
      if (row.row.scode == 2) {//判断条件，如果想要改变其他行样式，就写那一行的下标
        return `background-color: #fff1cf !important;color: #777777`
      } else {
        return `color: #777777`
      }
    },
    afterVisibleChange(val) {
      console.log('expenseVisible', val)
    },
    sumbit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          postAction(this.url.submiturl, this.record).then(res => {
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
              this.close()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {

          })
        } else {

          return false
        }
      })
    },
    download() {
      this.selectDownVisible = true
    },
    hideDownModal() {
      if (this.record.buisType == 1) {
        window.open('http://123.57.86.213:18080/RDP-SERVER/rdppage/main/531c5078a70a5f215ca1a0062e8ea381?serial=' + this.record.paySerial + '&type=' + this.downcom,
          'windowname',
          'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
      } else if (this.record.buisType == 2) {
        window.open('http://123.57.86.213:18080/RDP-SERVER/rdppage/main/\td84eec04b9af559a448518464d5e13fd?serial=' + this.record.paySerial + '&type=' + this.downcom,
          'windowname',
          'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
      }
      this.selectDownVisible = false
    },
    gotoAdd() {
      this.$emit('gotoAdd')
    },
    close() {
      console.log('close')
      this.$emit('close')
      // this.visible = false
    }
  }
}

</script>


<style scoped>
.box {
  position: relative;
  border: 1px solid #e8e8e8;
}

.box::before {
  content: attr(title);
  position: absolute;
  left: 5%;
  transform: translateX(-50%);
  -webkit-transform: translate(-50%, -50%);
  padding: 0 10px;
  background-color: #fff;
}

/deep/ .ant-form-item {
  margin-bottom: 0px;
}
</style>